使用 vue-cli 脚手架工具搭建一个 vue2.0 项目

发表于 | 分类于 |

开始用 vue 框架的时候，我只会

<script src="js/vue.min.js"></script>

然而这种方式可能比较适合入门和熟悉 vue，要进行开发的话还是要使用 vue 的官方命令行工具 vue-cli。

检查 node 和 npm 版本

第一次安装 vue-cli 要检查 node 和 npm 的版本，node 要 4.0 以上，npm 要 3.0 以上（node 和 npm 的安装就略过了）。

node -v
npm -v

如果不是所要求的版本需要升级，可参考：升级 node.js 和 npm

全局安装 v-cli

npm install -g vue-cli

初始化

vue init <template-name> <project-name>

template-name 是 vue 提供的官方模板，这里我们使用的是 webpack 打包工具。可以使用 vue list 命令查看所有可用的官方模板。

vue init webpack vue-demo

然后会有一些选项：

vue 初始化选项

选项 描述
Project name 项目名称
Project description 项目描述
Author github 用户名
Vue build 构建方式（独立构建、运行时构建，默认为独立构建）
Vue-router vue 路由，其实并不建议第一次用 vue-cli 的时候使用 vue-router，因为自动生成的项目会变得有些复杂，不好分析，后面用到的时候可以再安装
ESlint js 的代码检查工具，默认为 standard 标准安装
unit tests（Karma+Mocha） 单元测试，暂时忽略
e2e tests（Nightwatch） 端到端测试，暂时忽略

然后进入文件夹，安装依赖，运行项目

cd vue-demo
npm install 安装所有依赖
npm run dev 运行

然后浏览器会自动打开 http://localhost:8080/

就可以看到如下图所示的页面了。

到此为止，一个 vue 项目就基本搭建好了。

分析项目目录结构

接着我们来分析一下项目的目录结构：

文件目录结构

文件 描述
build 和 config webpack 配置相关文件
node_modules 通过 npm install 安装的依赖代码库
src 存放项目源码（开发的所有代码）
static 存放第三方静态资源
.babelrc babel 的一些配置，babel 的作用是将 ES6 转换成 ES5
.editorconfig 编辑器的配置（编码方式，缩进风格等等）
.eslintignore 不对这些文件做语法检查
.eslintrc eslint 的配置，在这里你可以改变默认的一些代码风格，比如句末分号等等
.gitignore 上传到 git 仓库时，忽略这些文件
.postcssrc.js 加载配置文件
index.html 项目的入口 html 文件
package.json 包管理
README.md 项目说明文件

接着我们可以分析一下与界面直接相关的文件与代码。

先看主目录下的入口 html 文件：index.html

index.html

发现只有一个 id 为 app 的 div，接着看 src 文件夹中的项目代码：

src 文件目录

  • assets 文件夹中存放的是一些静态资源文件，这里只放了一张 logo
    的图片。
  • components 文件夹存放的是组件，在 vue 中一个组件对应就是一个 .vue 文件，可以看做是 html 标签的拓展与复用，这里只有一个 hello.vue。
  • App.vue 这是整个页面的 vue 实例。
  • main.js 是项目的入口 js 文件。

先看 main.js 入口文件：

// 使用 import from 的方式加载模块或组件
import Vue from 'vue'
import App from './App'

// 关闭生产模式下给出的提示
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',  // 挂载到一个 id 为 app 的元素上（见index.html）
  template: '<App/>',  // 渲染组件
  // components 用来注册组件
  components: { App }  // 引入的组件
})

可以发现，main.js 引入了主实例 App.vue，并渲染到 index.html 上。

然后再看 App.vue：

<template>
  <div id="app">
    ![](./assets/logo.png)
    <hello></hello><!-- 使用 hello 组件 -->
  </div>
</template>

<script>
// 引入了 hello 组件
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

<style>
  ...
</style>

我们发现在 App.vue 中引入并使用了 hello 组件，至此还没发现任何与看到的页面相关的内容，怀着终于走到终点的心情打开了最后一个文件，惊觉原来如此，所有的东西都在这啊。

总而言之，我们在页面上看到的内容（除图片外）都是在 Hello.vue 这个文件定义的，作为一个可以重复使用的组件，被引入了 App.vue 这个实例中，App.vue 这个组件可以看做整个项目的主实例，而 App 这个组件又是通过 main.js 初始化并挂载到 index.html 中渲染的，至于说为什么没有 script 这样显式关联的语句，就是 webpack 的功劳了。

Fork me on GitHub